<template>
    <div class="app-container">
      数据
      <!-- 表格 -->
      <el-table
        
        :data="list"
        border
        fit
        highlight-current-row
        
        >
  
        
  
        <el-table-column prop="name" label="工程名称" width="80" />

        <el-table-column prop="shuini1" label="水泥" width="80" />
  
        <el-table-column prop="dashi1" label="大石" width="120" />
  
        <el-table-column prop="zhongshi1" label="中石" width="120" />
  
        <el-table-column prop="xiaoshi1" label="小石" width="120" />
  
        <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
  
        <!-- <el-table-column prop="id" label="id" width="160"/> -->



        <el-table-column label="操作" width="400" align="center">
          <template slot-scope="scope">
            <!-- <router-link :to="'/teacher/edit/'+scope.row.id"> -->
              <el-button  type="success" size="big" icon="el-icon-view" @click="showById(scope.row.id)">查看</el-button>
            <!-- </router-link> -->
            <!-- <el-button  type="primary" size="mini" icon="el-icon-edit-outline" @click="updateById(scope.row.id)">修改</el-button> -->
            
            <el-button  type="danger" size="big" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
  
            
          </template>
        </el-table-column>
      </el-table>
  
    <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
      />
  
    </div>
  </template>
  <script>
  //引入调用teacher.js文件
  
  import hn from '@/api/hunning'
  import {L2Dwidget} from 'live2d-widget'
  export default {
      //写核心代码位置
      // data:{
      // },
      data() { //定义变量和初始值
          return {
            
            list:null,
              
          //查询之后接口返回集合
            page:1,//当前页
            limit:10,//每页记录数
            total:0,//总记录数
            //teacherQuery:{} //条件封装对象
          }
      },
      created() { //页面渲染之前执行，一般调用methods定义的方法
          //调用
          this.getList() 
  
          //添加萌萌哒可爱二次元女动漫玩偶人物
          setTimeout(function () {
              L2Dwidget.init({
                  model: {
                      jsonPath: 'https://cdn.jsdelivr.net/gh/wangsrGit119/wangsr-image-bucket/L2Dwidget/live2d-widget-model-shizuku/assets/shizuku.model.json',
                  }
                  });
              },1000);
  
      },
      methods:{  
          //创建具体的方法，调用teacher.js定义的方法
          //讲师列表的方法
          getList(page=1) {
              this.page = page
              hn.showhunning(this.page,this.limit)
                  .then(response =>{//请求成功
                      //response接口返回的数据
                      //console.log(response)
                      // this.page = response.data.page
                      //this.limit = response.data.limit
                      this.list = response.data.row
                      this.total = response.data.total
                      
                      console.log(this.list.length)  
                      
                       console.log(this.total)
                      
                  }) 
          },
          resetData() {
            
            //清空的方法
              //表单输入项数据清空
              // this.teacherQuery = {}
              //查询所有讲师数据
              this.getList()
          },
          //删除记录的方法
          removeDataById(id) {
              this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {  //点击确定，执行then方法
                  //调用删除的方法
                  hn.deleteId(id)
                      .then(response =>{//删除成功
                      //提示信息
                      this.$message({
                          type: 'success',
                          message: '删除成功!'
                      });
                      //回到列表页面
                      this.getList()
                  })
              }) //点击取消，执行catch方法
          },
  
          //根据id查询记录
          showById(id){
            console.log(id)
            hn.showId(id)
              .then(response =>{
                this.list=response.data.hunning
                console.log(this.list)            
              })
              //回到列表页面 路由跳转
              this.$router.push({path:'/app/showid/'+id})  
          },


          //更新
        //   updateById(id){
        //     console.log(id)
        //     gc.showId(id)
        //       .then(response =>{
        //         this.list=response.data.gongcheng
        //         console.log(this.list)            
        //       })
        //       //回到列表页面 路由跳转
        //       this.$router.push({path:'/gongcheng/updateid/'+id})
        //   }
  
   
       }
  }
  </script>
  